// 使用react-window实现的虚拟无限下拉列表，AutoSizer保持和父元素一样的大小
// !!这个react-window的列表单项必须要固定高度，不太合理

import React, { useState, useEffect } from 'react'
import { FixedSizeList as List } from 'react-window';
import AutoSizer from "react-virtualized-auto-sizer";

import request from '../utils/request';
import "./ScrollList.css"

const Row = (itemData) => {
    const { index, style, data } = itemData
    const item = data[index]
    console.log("itemData:", itemData)

    return <div style={style}>{item.title}</div>
}


function ScrollList() {
    const [list, setList] = useState([])

    useEffect(() => {
        request({
            url: "http://192.168.199.187:1337/blogs"
        }).then(({ data }) => {
            console.log("data:", data)
            setList(data)
        })
    }, [])

    return (
        <div className="scroll-list-page">
            {/* 自动获取屏幕大小 */}
            <AutoSizer>
                {({ height, width }) => (
                    <List
                        itemData={list}
                        itemCount={list.length}
                        itemSize={35}
                        width={width}
                        height={height}
                    >
                        {Row}
                    </List>
                )}
            </AutoSizer>
        </div>
    )
}

export default ScrollList
